<template>
  <div class="app-container">
    <el-form v-model="demo" label-width="80px">
        <el-form-item prop="name" label="APP名字">
          <el-input v-model="demo.name" icon="search" name="title" placeholder="请输入名字"></el-input>
        </el-form-item>
        <el-form-item label="文件上传">
          <Input type="text" id="upClass"  placeholder="请选择文件路径" v-model="demo.packageName"  style="width:424px"></Input>
          <input class="file" id="inputFile" name="file" value="请选择2文件" type="file" @blur="blurInput" style="width:60px;float:right;height:36px;position:absolute;opacity:0;cursor:pointer;padding:20px" @change="update"/></input>
          <el-button style="cursor:pointer">浏览</el-button>
        </el-form-item>
      </el-form>
       <el-button type="primary" @click="sureImport" style="margin-top: 8px;margin-left: 20px;">确定</el-button>
        <el-button type="primary" style="margin-top: 8px;margin-left: 20px;"></i>添加下一个</el-button>
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import axios from 'axios'
export default {
  name: 'InlineEditTable',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      demo: {
        name: "",
        packageName: ""
      },
      list: [{
        mm: {
          nn: "mmmmm",
          kk: "3423",
          dd: "2323"
        },
        ii: "888"
      }],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      fileData: []
    }
  },
  created() {
  },
  methods: {
    sureImport() {
      axios
        .get(
          "/qiniu/upload-token"
        )
        .then(res => {
          console.log(this.fileData)
          let data = new FormData()
          data.append('name', this.demo.name)
          data.append('key', this.demo.name)
          data.append('token', res.data.uploadToken)
          data.append('file', this.fileData)
          axios.post('http://upload.qiniu.com', data, {withCredentials: false}).then(response => {
            axios.post('/app',{
                "attachment": {
                "contentType": {
                  "code": "APK"
                },
                "url": res.data.key
              },
              "cover": {
                "contentType": {
                  "code": "IMAGE",
                },
                "url": response.data.key
              },
              "name": this.demo.name,
              "packageName": this.fileData.name
            }).then(res => {
              console.log(res)
            })
          })
        });
    }, blurInput() {
      var fi = document.getElementById("inputFile");
      fi.onchange = function() {
        // console.log(this.value);
        this.fileData = this.value
        document.getElementById('upClass').value=this.fileData
        console.log(this.value)
        // this.value = "";
      }
    },
    update(e) {
      this.fileData = e.target.files[0];
      console.log(this.fileData)
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
#upClass {
  width: 420px;
  height: 35px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
